import React, { Component } from 'react'
import { NavBar, Icon, Tabs } from "antd-mobile";
import "./Orders.scss"
import axios from "axios"
export default class Orders extends Component {
  state = {
    cartList: [],//判断购物车中是否有产品
    tabs: [
      { title: "全部订单" }, { title: "待付款" }, { title: "待收货" }, { title: "待评价" }, { title: "筛选" }
    ],
    productList: []
  }
  componentDidMount() {
    axios.get("/cart.php?action=cart_ad_and_recommend&productIds=&img_size=h").then((res) => {
      this.setState({
        productList: res.data.data
      })
    }).catch(err => { console.log(err) })
  }
  //  点击跳转到详情页面
  handleItemClick = (goods_info) => {
    this.props.history.push({ pathname: "/goodDetail", state: { goods_info: goods_info} });
  }

  render() {
    return (
      <div className="dang-Order">
        {/* 我的导航条开始 */}
        <div className="dang-my-nav">
          <NavBar
            className="dang-my-header"
            mode="light"
            icon={<Icon type="left" />}
            onLeftClick={() => window.history.go(-1)}
            rightContent={[
              <Icon key="1" type="ellipsis" />,
            ]}
          >我的订单</NavBar>
        </div>
        {/* 分类导航条结束 */}

        {/* 商品订单列表导航开始 */}
        <div className="Order-tab">
          <Tabs tabs={this.state.tabs}
            initialPage={0}
            // onChange={(tab, index) => { console.log('onChange', index, tab); }}
            // onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
            tabBarUnderlineStyle={{ border: "0.013333rem solid red" }}
            tabBarInactiveTextColor={{ color: "#000" }}
            tabBarActiveTextColor={{ color: "red" }}>
            <div className="goodlist-zh" ref={this.goodListRef}>
              <div className="order-one-list">
                {
                  !this.state.cartList.length > 0 ?
                    (<div className="order-empty">
                      <div className="prompt">
                        <i className="iconfont icon-tanhao"></i>
                        <span>您暂无订单哦~</span>
                      </div>
                    </div>)
                    :
                    (<div>2</div>)
                }
                <div className="dang-my-product">
                  <div className="products-title">
                    <i className="iconfont icon-xianshi_xuanzetianchong"></i>
                    <h1 className="title-list">根据您的偏好猜您可能喜欢</h1>
                  </div>
                  <div className="dang-my-line"></div>
                </div>

                <div className="order-product">
                  <div className="product-list">
                    {
                      this.state.productList.map(val => {
                        return (
                          <div className="prodect-item" key={val.product_id} onClick={this.handleItemClick.bind(this, val)}>
                            <img src={val.image_url} alt="" />
                            <p className="list-title">{val.name}</p>
                            <div className="solider">
                              {
                                val.product_tags.map(v => {
                                  return <span key={v.name}>{v.name}</span>
                                })
                              }
                            </div>
                            <p className="price">￥{val.price}</p>
                          </div>
                        )
                      })
                    }
                  </div>
                </div>

              </div>
            </div>
            <div className="goodlist-zh" ref={this.goodListRef}>
              <div className="order-one-list">
                {
                  !this.state.cartList.length > 0 ?
                    (<div className="order-empty">
                      <div className="prompt">
                        <i className="iconfont icon-tanhao"></i>
                        <span>您暂无订单哦~</span>
                      </div>
                    </div>)
                    :
                    (<div>2</div>)
                }
                <div className="dang-my-product">
                  <div className="products-title">
                    <i className="iconfont icon-xianshi_xuanzetianchong"></i>
                    <h1 className="title-list">根据您的偏好猜您可能喜欢</h1>
                  </div>
                  <div className="dang-my-line"></div>
                </div>

                <div className="order-product">
                  <div className="product-list">
                    {
                      this.state.productList.map(val => {
                        return (
                          <div className="prodect-item" key={val.product_id} onClick={this.handleItemClick.bind(this, val)}>
                            <img src={val.image_url} alt="" />
                            <p className="list-title">{val.name}</p>
                            <div className="solider">
                              {
                                val.product_tags.map(v => {
                                  return <span key={v.name}>{v.name}</span>
                                })
                              }
                            </div>
                            <p className="price">￥{val.price}</p>
                          </div>
                        )
                      })
                    }
                  </div>
                </div>

              </div>
            </div>
            <div className="order-one-list">
              <div className="order-one-list">
                {
                  !this.state.cartList.length > 0 ?
                    (<div className="order-empty">
                      <div className="prompt">
                        <i className="iconfont icon-tanhao"></i>
                        <span>您暂无订单哦~</span>
                      </div>
                    </div>)
                    :
                    (<div>2</div>)
                }
                <div className="dang-my-product">
                  <div className="products-title">
                    <i className="iconfont icon-xianshi_xuanzetianchong"></i>
                    <h1 className="title-list">根据您的偏好猜您可能喜欢</h1>
                  </div>
                  <div className="dang-my-line"></div>
                </div>

                <div className="order-product">
                  <div className="product-list">
                    {
                      this.state.productList.map(val => {
                        return (
                          <div className="prodect-item" key={val.product_id} onClick={this.handleItemClick.bind(this, val)}>
                            <img src={val.image_url} alt="" />
                            <p className="list-title">{val.name}</p>
                            <div className="solider">
                              {
                                val.product_tags.map(v => {
                                  return <span key={v.name}>{v.name}</span>
                                })
                              }
                            </div>
                            <p className="price">￥{val.price}</p>
                          </div>
                        )
                      })
                    }
                  </div>
                </div>

              </div>
            </div>
            <div className="order-one-list">
              <div className="order-one-list">
                {
                  !this.state.cartList.length > 0 ?
                    (<div className="order-empty">
                      <div className="prompt">
                        <i className="iconfont icon-tanhao"></i>
                        <span>您暂无订单哦~</span>
                      </div>
                    </div>)
                    :
                    (<div>2</div>)
                }
                <div className="dang-my-product">
                  <div className="products-title">
                    <i className="iconfont icon-xianshi_xuanzetianchong"></i>
                    <h1 className="title-list">根据您的偏好猜您可能喜欢</h1>
                  </div>
                  <div className="dang-my-line"></div>
                </div>

                <div className="order-product">
                  <div className="product-list">
                    {
                      this.state.productList.map(val => {
                        return (
                          <div className="prodect-item" key={val.product_id} onClick={this.handleItemClick.bind(this, val)}>
                            <img src={val.image_url} alt="" />
                            <p className="list-title">{val.name}</p>
                            <div className="solider">
                              {
                                val.product_tags.map(v => {
                                  return <span key={v.name}>{v.name}</span>
                                })
                              }
                            </div>
                            <p className="price">￥{val.price}</p>
                          </div>
                        )
                      })
                    }
                  </div>
                </div>

              </div>
            </div>
            <div className="order-one-list">
              <div className="order-one-list">
                {
                  !this.state.cartList.length > 0 ?
                    (<div className="order-empty">
                      <div className="prompt">
                        <i className="iconfont icon-tanhao"></i>
                        <span>您暂无订单哦~</span>
                      </div>
                    </div>)
                    :
                    (<div>2</div>)
                }
                <div className="dang-my-product">
                  <div className="products-title">
                    <i className="iconfont icon-xianshi_xuanzetianchong"></i>
                    <h1 className="title-list">根据您的偏好猜您可能喜欢</h1>
                  </div>
                  <div className="dang-my-line"></div>
                </div>

                <div className="order-product">
                  <div className="product-list">
                    {
                      this.state.productList.map(val => {
                        return (
                          <div className="prodect-item" key={val.product_id} onClick={this.handleItemClick.bind(this, val)}>
                            <img src={val.image_url} alt="" />
                            <p className="list-title">{val.name}</p>
                            <div className="solider">
                              {
                                val.product_tags.map(v => {
                                  return <span key={v.name}>{v.name}</span>
                                })
                              }
                            </div>
                            <p className="price">￥{val.price}</p>
                          </div>
                        )
                      })
                    }
                  </div>
                </div>

              </div>
            </div>
          </Tabs>
        </div>
        {/* 订单列表导航结束 */}
























      </div>
    )
  }
}
